<template>
  <div class="xcx_home_config">
    <div class="flex main">
      <div class="flex-1 left">
        <div class="m-auto model_wrap">
          <div v-for="(item, index) in sectionList" :key="index" class="section_wrap"
            :class="{ 'active': index + 1 == activeNum, 'marginTop': index === 2 }" @click="activeNum = index + 1">
            <img class="block w-100" :src="require('../../../assets/images/xcx/' + item.imgName)" :alt="item.title">
            <div v-show="!item.show" class="flex flex-center w-100 h-100 hide_div">已隐藏</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="flex flex-between-center header">
          <h5 class="color-666 normal-font">{{ sectionList[activeNum - 1].title }}</h5>
          <div>
            <el-switch v-model="sectionList[activeNum - 1].show" active-color="#4ccb86" inactive-color="#ff4146" />
            <span class="v-middle" style="margin-left:10px">{{ sectionList[activeNum - 1].show ? "开启" : "隐藏" }}</span>
          </div>
        </div>
        <div class="main_form">
          <!-- 热搜 -->
          <hot-search v-if="activeNum == 1" ref="hotSearch" />
          <!-- 九宫格 -->
          <nine-grid v-if="activeNum == 2" ref="nineGrid" />
          <!-- banner -->
          <capsule-banner v-if="activeNum == 3" ref="capsuleBanner" />
          <!-- 苹果专区 -->
          <apple-card v-if="activeNum == 4" ref="appleCard" />
          <!-- 热销专区 -->
          <hot-sale v-if="activeNum == 5" ref="hotSale" />
          <!-- 二手专区 -->
          <two-col-goods v-if="activeNum == 6" ref="twoColGoods" />
          <!-- 电脑专区 -->
          <computer-zone v-if="activeNum == 7" ref="computerZone" />
          <!-- 特卖活动 -->
          <special-sale v-if="activeNum == 8" ref="specialSale" />
        </div>
        <div class="text-center footer">
          <el-button style="width:200px" size="small" type="primary" @click="save">保存</el-button>
        </div>
      </div>
    </div>
    <div class="fix-footer-btns">
      <el-button v-if="$hasMethod('#preview')" size="small" @click="preview">预览</el-button>
      <el-button v-if="$hasMethod('#publish')" size="small" type="primary" @click="release">发布</el-button>
    </div>
  </div>
</template>
<script>
import hotSearch from './child/hotSearch'
import nineGrid from './child/nineGrid'
import capsuleBanner from './child/capsuleBanner'
import appleCard from './child/appleCard'
import hotSale from './child/hotSale'
import twoColGoods from './child/twoColGoods'
import computerZone from './child/computerZone'
import specialSale from './child/specialSale'
import { saveParams, getParamsByType, releaseOnline, previewIndex } from '@/api/xcx'
export default {
  components: { hotSearch, capsuleBanner, nineGrid, appleCard, hotSale, twoColGoods, computerZone, specialSale },
  data() {
    return {
      activeNum: 1,
      sectionList: [
        {
          title: '热门搜索',
          show: true,
          imgName: '1.jpg'
        },
        {
          title: '分类',
          show: true,
          imgName: '2.jpg'
        },
        {
          title: 'bannner',
          show: true,
          imgName: '3.jpg'
        },
        {
          title: '苹果专区',
          show: true,
          imgName: '4.jpg'
        },
        {
          title: '热销专区',
          show: true,
          imgName: '5.jpg'
        },
        {
          title: '二手专区',
          show: true,
          imgName: '6.jpg'
        },
        {
          title: '电脑专区',
          show: true,
          imgName: '7.jpg'
        },
        {
          title: '特卖活动',
          show: true,
          imgName: '8.jpg'
        },
      ],
      refsKey: {
        4: "appleCard",
        5: "hotSale",
        6: "twoColGoods",
        7: "computerZone",
      }
    }
  },
  watch: {
    activeNum(val) {
      this.getParams(val)
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getAllStatus() {

    },
    init() {
      previewIndex().then(res => {
        const showTypes = res.map(k => k.type)
        this.sectionList.forEach((item, index) => {
          const num = index + 1
          if (showTypes.indexOf(num) === -1) {
            // item.show = false
          }
        })
        this.getParams(this.activeNum)
      })
    },
    preview() {
      this.$router.push({ name: 'xcxPosPreview' })
    },
    release() {
      releaseOnline().then(res => { })
    },
    //设置热搜数据
    setHotSearchData(data) {
      this.$refs.hotSearch.dataList = [...data];
      this.$refs.hotSearch.inputNodeLength = data.length;
    },
    //
    setNineGridData(data) {
      this.$refs.nineGrid.iconList = [...data]
    },
    setCapsuleBannerData(data) {
      this.$refs.capsuleBanner.bannerList = [...data];
    },
    //设置指定专区数据
    setAppointCardData(data, refName) {
      this.$refs[refName].carousel = [...data.carousel];
      this.$refs[refName].viceFlag = data.viceFlag;
      this.$refs[refName].mainTitle = data.mainTitle;
      this.$refs[refName].viceTitle = data.viceTitle;
      this.$refs[refName].junpUrl = data.junpUrl;
    },
    //设置特卖活动数据
    setSpecialSaleData(data) {
      for (let key in data) {
        this.$refs.specialSale[key] = data[key];
      }
    },
    // 获取数据
    getParams(type) {
      getParamsByType(type).then(res => {
        if (res) {
          const { status } = res;
          const data = JSON.parse(res.params);
          //拿到数据存放到子页面
          this.$nextTick(() => {
            //热搜
            type === 1 && this.setHotSearchData(data)
            //九宫格
            type === 2 && this.setNineGridData(data);
            // banner轮播
            type === 3 && (this.$refs.capsuleBanner.bannerList = [...data]);
            //苹果专区
            type === 4 && this.setAppointCardData(data, "appleCard");
            //热销专区
            type === 5 && this.setAppointCardData(data, "hotSale");
            //二手专区
            type === 6 && this.setAppointCardData(data, "twoColGoods");
            //电脑专区
            type === 7 && this.setAppointCardData(data, "computerZone");
            //特卖活动
            type === 8 && this.setSpecialSaleData(data);
          })
        }
      })
    },
    // 保存热门搜索
    saveHotSearch() {
      const nodeInfo = this.$refs.hotSearch.getAllInput();
      if (!nodeInfo.length) {
        return this.$message({
          message: "热门搜索列表为空",
          type: 'error'
        })
      }
      saveParams({
        type: 1,
        status: this.sectionList[this.activeNum - 1].show ? 2 : 1,
        params: JSON.stringify(nodeInfo)
      }).then((res) => {
        //开启有问题
        // this.getParams(1)
      })
    },
    // 保存九宫格
    saveNineGrid() {
      const list = [...this.$refs.nineGrid.iconList]
      if (this.validateIcon(list)) {
        saveParams({ type: 2, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(2)
        })
      }
    },
    // 保存banner
    saveCapsuleBanner() {
      const list = [...this.$refs.capsuleBanner.bannerList]
      if (this.validateBannerList(list)) {
        saveParams({
          type: 3,
          status: this.sectionList[this.activeNum - 1].show ? 2 : 1,
          params: JSON.stringify(list)
        }).then(res => {
          this.getParams(3)
        })
      }
    },
    //保存指定专区商品
    saveAppointCardData(type) {
      const refName = this.refsKey[type];
      const list = this.$refs[refName].getData();
      if (this.validateBannerList(list.carousel)) {
        saveParams({
          type,
          status: this.sectionList[this.activeNum - 1].show ? 2 : 1,
          params: JSON.stringify(list)
        }).then(res => {
          this.getParams(type)
        })
      }
    },
    //特卖活动
    saveSpecialSale() {
      const allData = this.$refs.specialSale.getData();
      if (!allData) return;
      saveParams({
        type: 8,
        status: this.sectionList[this.activeNum - 1].show ? 2 : 1,
        params: JSON.stringify(allData)
      }).then(res => {
        this.getParams(8)
      })
    },
    //检查九宫格icon
    validateIcon(list) {
      for (const index in list) {
        const num = parseInt(index) + 1
        if ((!list[index].img) && (!list[index].title) && (!list[index].jumpUrl)) {
          return true
        }
        if (!list[index].img) {
          this.$message({
            message: `图标${num}的图片不能为空`,
            type: 'error'
          })
          return false
        }
        if (!list[index].title) {
          this.$message({
            message: `图标${num}的名称不能为空`,
            type: 'error'
          })
          return false
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: `图标${num}的ID不能为空`,
            type: 'error'
          })
          return false
        }

      }
      return true
    },
    // 校验轮播图列表
    validateBannerList(list) {
      if (list.length === 0) {
        this.$message({
          message: '请添加轮播图',
          type: 'warning'
        })
        return false
      }
      for (let index = 0; index < list.length; index++) {
        const num = index + 1
        if (!list[index].img) {
          this.$message({
            message: '请添加轮播图' + num + '的图片',
            type: 'warning'
          })
          return false
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: '请添加轮播图' + num + '的链接',
            type: 'warning'
          })
          return false
        }
      }
      return true
    },
    // 保存品类商品推荐
    save() {
      switch (this.activeNum) {
        case 1:
          this.saveHotSearch()
          break
        case 2:
          this.saveNineGrid()
          break
        case 3:
          this.saveCapsuleBanner()
          break
        case 8:
          this.saveSpecialSale()
          break
        default:
          break
      }
      this.saveAppointCardData(this.activeNum);
    }
  }
}
</script>

<style lang="scss" scoped>
.xcx_home_config {
  padding: 0;
}

.main {
  height: 73vh;
}

.left {
  padding: 30px;
  background-color: #f5f5f5;
  overflow: auto;
}

.right {
  width: 420px;
  overflow-y: auto;

  .header {
    padding: 15px;
    border-bottom: 1px solid #eeeeee;
  }

  .footer {
    padding: 15px 0;
    border-top: 1px solid #eeeeee;
  }
}

.model_wrap {
  width: 375px;

  &>div.active {
    border: 1px solid $mainBlue;
  }
}

.main_form {
  padding: 15px 20px;
}

.section_wrap {
  position: relative;

  &.marginTop {
    margin-top: 8px;
    margin-bottom: 5px;
  }
}

.hide_div {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  background: #000000;
  opacity: 0.5;
  font-size: 32px;
}
</style>
